<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <!--大拇指-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/res/css/index.css">
    <link rel="stylesheet" href="/static/res/css/base.css">
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 加载layui通用js脚本 -->
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script src="/static/res/js/web-util.js" charset="utf-8"></script>

<div class="layui-container">
    <div class="logo-bar">
        <img src="/static/res/img/icon_blue.png">
        <label>管理后台</label>
    </div>

    <div class="layui-tab layui-tab-brief" lay-filter="TabMenu">
        <ul class="layui-tab-title align-right">
            <li lay-id="1001" class="layui-this">首页</li>
            <li lay-id="1002">用户管理</li>
            <li lay-id="1003">菜单管理</li>
            <li lay-id="1004">消息中心</li>
            <li lay-id="1005">设置</li>
        </ul>

        <div class="layui-tab-content layui-main">
            <div class="layui-tab-item layui-show">
                <div style="width: 300px; height: 200px; background-color: #00F7DE; display: none">
                </div>
                <div style="width: 300px; height: 200px; background-color: #1E9FFF">
                </div>
            </div>
            <div class="layui-tab-item">
                {{template "/index/UserManager.html"}}
            </div>
            <div class="layui-tab-item">
                {{template "AddFoodItem.html"}}
            </div>
            <div class="layui-tab-item">4</div>
            <div class="layui-tab-item">5</div>
        </div>
    </div>
</div>

<script>
    layui.use('element', function(){
        var element = layui.element;
        console.log(location.hash);
        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#TabMenu=/, '');
        element.tabChange('TabMenu', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

        //监听Tab切换，以改变地址hash值
        element.on('tab(TabMenu)', function(){
            location.hash = 'TabMenu='+ this.getAttribute('lay-id');
            // window.location.href = "/v1/pages/login"
//            if (this.getAttribute('lay-id') == "1002" && location.hash.indexOf("umTab") < 0) {
//                if (location.hash.length > 0) {
//                    location.hash =  location.hash + "&umTab=0";
//                } else {
//                    location.hash =  "#umTab=0";
//                }
//            }
        });
    });
</script>


</body>
</html>